<template>
  <div class="_wz_cent_main _wz_educationalStatistics">
    <Row :gutter="10" style="height:100%;">
      <i-col span="16" style="height:100%;">
        <Row style="height: 160px;margin: 0 0 10px 0;">
          <i-col span="12" style="height: 100%;padding: 0  5px 0 0;">
            <Card dis-hover style="height:  100%;">
              <p slot="title">教育培训</p>
              <p slot="extra" style="color: #2d8cf0;">
                {{!!educateStatistics.trainPlanCount?educateStatistics.trainPlanCount.trainPlanAllCount:'0'}}
              </p>
              <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
                <i-col span="8" style="height: 100%;text-align: center;padding-top: 10px;">
                  <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!educateStatistics.trainPlanCount?educateStatistics.trainPlanCount.trainPlanUnStartCount:'0'}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">未开始（期）</div>
                </i-col>
                <i-col span="8" style="height: 100%;text-align: center;border-right: 1px solid #e8eaec;border-left: 1px solid #e8eaec;padding-top: 10px;">
                  <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!educateStatistics.trainPlanCount?educateStatistics.trainPlanCount.trainPlanUnFinishCount:'0'}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">进行中（期）</div>
                </i-col>
                <i-col span="8" style="height: 100%;text-align: center;padding-top: 10px;">
                  <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!educateStatistics.trainPlanCount?educateStatistics.trainPlanCount.trainPlanFinishCount:'0'}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">已完成（期）</div>
                </i-col>
              </Row>
            </Card>
          </i-col>
          <i-col span="12" style="height: 100%;padding: 0  0 0 5px;">
            <Card dis-hover style="height:  100%;">
              <p slot="title">考试测评</p>
              <p slot="extra" style="color: #2d8cf0;">
                {{!!educateStatistics.examPlanCount?educateStatistics.examPlanCount.examPlanAllCount:'0'}}
              </p>
              <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
                <i-col span="8" style="height: 100%;text-align: center;padding-top: 10px;">
                  <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!educateStatistics.examPlanCount?educateStatistics.examPlanCount.examPlanUnStartCount:'0'}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">未开始（期）</div>
                </i-col>
                <i-col span="8" style="height: 100%;text-align: center;border-right: 1px solid #e8eaec;border-left: 1px solid #e8eaec;padding-top: 10px;">
                  <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!educateStatistics.examPlanCount?educateStatistics.examPlanCount.examPlanUnFinishCount:'0'}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">进行中（期）</div>
                </i-col>
                <i-col span="8" style="height: 100%;text-align: center;padding-top: 10px;">
                  <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!educateStatistics.examPlanCount?educateStatistics.examPlanCount.examPlanFinishCount:'0'}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">已完成（期）</div>
                </i-col>
              </Row>
            </Card>
          </i-col>
        </Row>
        <i-col span="24" style="height: calc(100% - 20px - 160px - 230px);margin: 0 0 10px 0;">
          <Card dis-hover style="height:  100%;">
            <p slot="title">培训进度统计</p>
            <div style="height:100%;" ref="wzTopHeight">
              <regionalDiscount :leftHeight="topHeight" v-if="topHeight !== 0 && homeAnalysisLoanMonthNum.type" :homeAnalysisLoanMonthNum="homeAnalysisLoanMonthNum"></regionalDiscount>
            </div>
          </Card>
        </i-col>
        <i-col span="24" style="height: 230px;">
          <Card dis-hover style="height:  100%;">
            <p slot="title">课件类型统计</p>
            <Row :gutter="10" style="height: 100%;">
              <i-col span="3" style="height: 100%">
                <Card dis-hover style="height:  100%;padding: 10px 0;">
                  <div style="text-align: center;">
                    <span style="background: #1fc712;color: #fff;border-radius: 8px;padding: 10px;margin: auto;display: inline-block;width: 62px;height: 62px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">法律<br/>法规</span>
                  </div>
                  <Row style="margin: 10px;">
                    <i-col span="12" style="border-right: 1px solid #e8eaec;text-align: right;padding: 0 10px 0 0;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialTrainCount?educateStatistics.materialTrainCount.materialTrainFLFGCount:'0'}}</div>
                      <div style="color: #2d8cf0;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">课件</div>
                    </i-col>
                    <i-col span="12" style="text-align: left;padding: 0 0 0 10px;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialExam?educateStatistics.materialExam.materialExamFLFGCount:'0'}}</div>
                      <div style="color: #19be6b;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">试卷</div>
                    </i-col>
                  </Row>
                </Card>
              </i-col>
              <i-col span="3" style="height: 100%">
                <Card dis-hover style="height:  100%;padding: 10px 0;">
                  <div style="text-align: center;">
                    <span style="background: #00cccc;color: #fff;border-radius: 8px;padding: 10px;margin: auto;display: inline-block;width: 62px;height: 62px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">警示<br/>教育</span>
                  </div>
                  <Row style="margin: 10px;">
                    <i-col span="12" style="border-right: 1px solid #e8eaec;text-align: right;padding: 0 10px 0 0;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialTrainCount?educateStatistics.materialTrainCount.materialTrainJSJYCount:'0'}}</div>
                      <div style="color: #2d8cf0;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">课件</div>
                    </i-col>
                    <i-col span="12" style="text-align: left;padding: 0 0 0 10px;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialExam?educateStatistics.materialExam.materialExamJSJYCount:'0'}}</div>
                      <div style="color: #19be6b;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">试卷</div>
                    </i-col>
                  </Row>
                </Card>
              </i-col>
              <i-col span="3" style="height: 100%">
                <Card dis-hover style="height:  100%;padding: 10px 0;">
                  <div style="text-align: center;">
                    <span style="background: #2381ff;color: #fff;border-radius: 8px;padding: 10px;margin: auto;display: inline-block;width: 62px;height: 62px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">安全<br/>知识</span>
                  </div>
                  <Row style="margin: 10px;">
                    <i-col span="12" style="border-right: 1px solid #e8eaec;text-align: right;padding: 0 10px 0 0;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialTrainCount?educateStatistics.materialTrainCount.materialTrainAQZSCount:'0'}}</div>
                      <div style="color: #2d8cf0;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">课件</div>
                    </i-col>
                    <i-col span="12" style="text-align: left;padding: 0 0 0 10px;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialExam?educateStatistics.materialExam.materialExamAQZSCount:'0'}}</div>
                      <div style="color: #19be6b;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">试卷</div>
                    </i-col>
                  </Row>
                </Card>
              </i-col>
              <i-col span="3" style="height: 100%">
                <Card dis-hover style="height:  100%;padding: 10px 0;">
                  <div style="text-align: center;">
                    <span style="background: #fc833e;color: #fff;border-radius: 8px;padding: 10px;margin: auto;display: inline-block;width: 62px;height: 62px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">事故<br/>案例</span>
                  </div>
                  <Row style="margin: 10px;">
                    <i-col span="12" style="border-right: 1px solid #e8eaec;text-align: right;padding: 0 10px 0 0;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialTrainCount?educateStatistics.materialTrainCount.materialTrainSGALCount:'0'}}</div>
                      <div style="color: #2d8cf0;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">课件</div>
                    </i-col>
                    <i-col span="12" style="text-align: left;padding: 0 0 0 10px;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialExam?educateStatistics.materialExam.materialExamSGALCount:'0'}}</div>
                      <div style="color: #19be6b;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">试卷</div>
                    </i-col>
                  </Row>
                </Card>
              </i-col>
              <i-col span="3" style="height: 100%">
                <Card dis-hover style="height:  100%;padding: 10px 0;">
                  <div style="text-align: center;">
                    <span style="background: #1fc712;color: #fff;border-radius: 8px;padding: 10px;margin: auto;display: inline-block;width: 62px;height: 62px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">生理<br/>健康</span>
                  </div>
                  <Row style="margin: 10px;">
                    <i-col span="12" style="border-right: 1px solid #e8eaec;text-align: right;padding: 0 10px 0 0;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialTrainCount?educateStatistics.materialTrainCount.materialTrainSLJKCount:'0'}}</div>
                      <div style="color: #2d8cf0;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">课件</div>
                    </i-col>
                    <i-col span="12" style="text-align: left;padding: 0 0 0 10px;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialExam?educateStatistics.materialExam.materialExamSLJKCount:'0'}}</div>
                      <div style="color: #19be6b;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">试卷</div>
                    </i-col>
                  </Row>
                </Card>
              </i-col>
              <i-col span="3" style="height: 100%">
                <Card dis-hover style="height:  100%;padding: 10px 0;">
                  <div style="text-align: center;">
                    <span style="background: #00cccc;color: #fff;border-radius: 8px;padding: 10px;margin: auto;display: inline-block;width: 62px;height: 62px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">应急<br/>处理</span>
                  </div>
                  <Row style="margin: 10px;">
                    <i-col span="12" style="border-right: 1px solid #e8eaec;text-align: right;padding: 0 10px 0 0;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialTrainCount?educateStatistics.materialTrainCount.materialTrainYJCLCount:'0'}}</div>
                      <div style="color: #2d8cf0;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">课件</div>
                    </i-col>
                    <i-col span="12" style="text-align: left;padding: 0 0 0 10px;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialExam?educateStatistics.materialExam.materialExamYJCLCount:'0'}}</div>
                      <div style="color: #19be6b;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">试卷</div>
                    </i-col>
                  </Row>
                </Card>
              </i-col>
              <i-col span="3" style="height: 100%">
                <Card dis-hover style="height:  100%;padding: 10px 0;">
                  <div style="text-align: center;">
                    <span style="background: #2381ff;color: #fff;border-radius: 8px;padding: 10px;margin: auto;display: inline-block;width: 62px;height: 62px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">安全<br/>驾驶</span>
                  </div>
                  <Row style="margin: 10px;">
                    <i-col span="12" style="border-right: 1px solid #e8eaec;text-align: right;padding: 0 10px 0 0;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialTrainCount?educateStatistics.materialTrainCount.materialTrainAQJSCount:'0'}}</div>
                      <div style="color: #2d8cf0;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">课件</div>
                    </i-col>
                    <i-col span="12" style="text-align: left;padding: 0 0 0 10px;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialExam?educateStatistics.materialExam.materialExamAQJSCount:'0'}}</div>
                      <div style="color: #19be6b;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">试卷</div>
                    </i-col>
                  </Row>
                </Card>
              </i-col>
              <i-col span="3" style="height: 100%">
                <Card dis-hover style="height:  100%;padding: 10px 0;">
                  <div style="text-align: center;">
                    <span style="background:  #fc833e;color: #fff;border-radius: 8px;padding: 10px;margin: auto;display: inline-block;width: 62px;height: 62px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">职业<br/>素养</span>
                  </div>
                  <Row style="margin: 10px;">
                    <i-col span="12" style="border-right: 1px solid #e8eaec;text-align: right;padding: 0 10px 0 0;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialTrainCount?educateStatistics.materialTrainCount.materialTrainZYSYCount:'0'}}</div>
                      <div style="color: #2d8cf0;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">课件</div>
                    </i-col>
                    <i-col span="12" style="text-align: left;padding: 0 0 0 10px;">
                      <div style="font-size: 18px;">{{!!educateStatistics.materialExam?educateStatistics.materialExam.materialExamZYSYCount:'0'}}</div>
                      <div style="color: #19be6b;line-height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">试卷</div>
                    </i-col>
                  </Row>
                </Card>
              </i-col>
            </Row>
          </Card>
        </i-col>
      </i-col>
      <i-col span="8" style="height: 100%;">
        <Card dis-hover style="height:  100%;">
          <p slot="title">本期培训计划</p>
          <div style="height: 100%;" class="_wz_educationalStatistics_right">
            <Row :gutter="10" style="height:200px;">
              <i-col span="12" style="height: 100%;">
                <Card dis-hover style="height:  100%;">
                  <div style="height:100%;" ref="bingTuH">
                    <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && trainPlanMonth.trainPlanMonthType" :bingTuData="trainPlanMonth"></bingTu>
                  </div>
                </Card>
              </i-col>
              <i-col span="12" style="height: 100%;">
                <Card dis-hover  style="height:  100%;">
                  <div  style="height:  100%;display: flex;align-content: center;justify-content: center;align-items: center;flex-direction: column;">
                    <div style="height: calc(100% / 3);width: 80%;display: flex;align-content: center;flex-direction: column;justify-content: center;">
                      <div>
                        日常培训数量<span style="color: #19be6b;margin:0 3px;">{{!!educateStatistics.trainPlanMonth?educateStatistics.trainPlanMonth.monthTrainRCPXFinishCount:0}}</span>/<span style="color: #2d8cf0;margin:0 3px;">{{!!educateStatistics.trainPlanMonth?educateStatistics.trainPlanMonth.monthTrainRCPXCount:0}}</span>
                      </div>
                      <template v-if="!!educateStatistics.trainPlanMonth && !!educateStatistics.trainPlanMonth.monthTrainRCPXFinishCount">
                        <Progress :percent="educateStatistics.trainPlanMonth.monthTrainRCPXCount / educateStatistics.trainPlanMonth.monthTrainRCPXFinishCount" status="active" />
                      </template>
                      <Progress v-else :percent="0" status="active" />
                    </div>
                    <div style="height: calc(100% / 3);width: 80%;display: flex;align-content: center;flex-direction: column;justify-content: center;">
                      <div>
                        岗前培训数量<span style="color: #19be6b;margin:0 3px;">{{!!educateStatistics.trainPlanMonth?educateStatistics.trainPlanMonth.monthTrainGQPXFinishCount:0}}</span>/<span style="color: #2d8cf0;margin:0 3px;">{{!!educateStatistics.trainPlanMonth?educateStatistics.trainPlanMonth.monthTrainGQPXCount:0}}</span>
                      </div>
                      <template v-if="!!educateStatistics.trainPlanMonth && !!educateStatistics.trainPlanMonth.monthTrainGQPXFinishCount">
                        <Progress :percent="educateStatistics.trainPlanMonth.monthTrainGQPXCount / educateStatistics.trainPlanMonth.monthTrainGQPXFinishCount" status="active" />
                      </template>
                      <Progress v-else :percent="0" status="active" />
                    </div>
                    <div style="height: calc(100% / 3);width: 80%;display: flex;align-content: center;flex-direction: column;justify-content: center;">
                      <div>
                        专项培训数量<span style="color: #19be6b;margin:0 3px;">{{!!educateStatistics.trainPlanMonth?educateStatistics.trainPlanMonth.monthTrainZXPXFinishCount:0}}</span>/<span style="color: #2d8cf0;margin:0 3px;">{{!!educateStatistics.trainPlanMonth?educateStatistics.trainPlanMonth.monthTrainZXPXCount:0}}</span>
                      </div>
                      <template v-if="!!educateStatistics.trainPlanMonth && !!educateStatistics.trainPlanMonth.monthTrainZXPXFinishCount">
                        <Progress :percent="educateStatistics.trainPlanMonth.monthTrainZXPXCount / educateStatistics.trainPlanMonth.monthTrainZXPXFinishCount" status="active" />
                      </template>
                      <Progress v-else :percent="0" status="active" />
                    </div>
                  </div>
                </Card>
              </i-col>
            </Row>
            <Row :gutter="10" style="height:200px;margin: 10px -5px;">
              <i-col span="12" style="height: 100%;">
                <Card dis-hover style="height:  100%;">
                  <div style="height:100%;" ref="bingTuH">
                    <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && examPlanMonth.examPlanMonthType" :bingTuData="examPlanMonth"></bingTu>
                  </div>
                </Card>
              </i-col>
              <i-col span="12" style="height: 100%;">
                <Card dis-hover  style="height:  100%;">
                  <div  style="height:  100%;display: flex;align-content: center;justify-content: center;align-items: center;flex-direction: column;">
                    <div style="height: calc(100% / 2);width: 80%;display: flex;align-content: center;flex-direction: column;justify-content: center;">
                      <div>
                        随堂测验数量<span style="color: #19be6b;margin:0 3px;">{{!!educateStatistics.examPlanMonth?educateStatistics.examPlanMonth.monthExamSTCYFinishCount:0}}</span>/<span style="color: #2d8cf0;margin:0 3px;">{{!!educateStatistics.examPlanMonth?educateStatistics.examPlanMonth.monthExamSTCYCount:0}}</span>
                      </div>
                      <template v-if="!!educateStatistics.examPlanMonth && !!educateStatistics.examPlanMonth.monthExamSTCYFinishCount">
                        <Progress :percent="educateStatistics.examPlanMonth.monthExamSTCYCount / educateStatistics.examPlanMonth.monthExamSTCYFinishCount" status="active" />
                      </template>
                      <Progress v-else :percent="0" status="active" />
                    </div>
                    <div style="height: calc(100% / 2);width: 80%;display: flex;align-content: center;flex-direction: column;justify-content: center;">
                      <div>
                        考试测验数量<span style="color: #19be6b;margin:0 3px;">{{!!educateStatistics.examPlanMonth?educateStatistics.examPlanMonth.monthExamKSCYFinishCount:0}}</span>/<span style="color: #2d8cf0;margin:0 3px;">{{!!educateStatistics.examPlanMonth?educateStatistics.examPlanMonth.monthExamKSCYCount:0}}</span>
                      </div>
                      <template v-if="!!educateStatistics.examPlanMonth && !!educateStatistics.examPlanMonth.monthExamKSCYFinishCount">
                        <Progress :percent="educateStatistics.examPlanMonth.monthExamKSCYCount / educateStatistics.examPlanMonth.monthExamKSCYFinishCount" status="active" />
                      </template>
                      <Progress v-else :percent="0" status="active" />
                    </div>
                  </div>
                </Card>
              </i-col>
            </Row>
            <div style="height: calc(100% - 200px - 200px - 20px);">
              <Card dis-hover  style="height:  100%;">
                <Row :gutter="10" style="margin: 10px 0;border-bottom: 1px solid #e8eaec;padding: 10px 0;">
                  <i-col span="8" style="text-align: center;">
                    <div style="font-size: 18px;color: #ed4014;line-height: 30px;">{{!!educateStatistics.trainPlanStudentMonth?educateStatistics.trainPlanStudentMonth.monthTrainStudentUnStartCount:0}}</div>
                    <div style="font-size: 12px;color: #ada2a2;">未开始</div>
                  </i-col>
                  <i-col span="8" style="text-align: center;border: 1px solid #e8eaec;border-top: 0px;border-bottom: 0px; ">
                    <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!educateStatistics.trainPlanStudentMonth?educateStatistics.trainPlanStudentMonth.monthTrainStudentUnFinishCount:0}}</div>
                    <div style="font-size: 12px;color: #ada2a2;line-height: 30px;">进行中</div>
                  </i-col>
                  <i-col span="8" style="text-align: center;">
                    <div style="font-size: 18px;color: #2d8cf0;">{{!!educateStatistics.trainPlanStudentMonth?educateStatistics.trainPlanStudentMonth.monthTrainStudentFinishCount:0}}</div>
                    <div style="font-size: 12px;color: #ada2a2;">已完成</div>
                  </i-col>
                </Row>
                <div style="height: calc(100% - 81px - 20px);">
                  <div style="height:100%;" ref="bingTuHBott">
                    <bingTu :topHeight="bingTuHBottHeight" v-if="bingTuHBottHeight != 0 && trainPlanStudentMonth.trainPlanStudentMonthType" :bingTuData="trainPlanStudentMonth"></bingTu>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
import regionalDiscount from "../../../components/Chart/lineChart/regionalDiscount";
import bingTu from "../../../components/Chart/lineChart/bingTu";

  export default {
    components: {
      regionalDiscount,
      bingTu,
    },
    data() {
      return {
        spinShow:false,
        topHeight: 0,
        educateStatistics:{},
        bingTuHeight: 0,
        bingTuHBottHeight:0,
        homeAnalysisLoanMonthNum: {//合同月统计
          "id": "homeAnalysisLoanMonthNumId",
          "data": [],
          "unit": "完成人数",
          "style": {
            "padding": [20, 20, 50, 60]
          },
          type: false,
          list:true,
        },

        trainPlanMonth: {//本月培训
          "id": "trainPlanMonth",
          "data": [],
          "unit": "次",
          "style": {
            "padding": [20, 20, 50, 20]
          },
          trainPlanMonthType: false,
        },

        examPlanMonth: {//本月考试
          "id": "examPlanMonth",
          "data": [],
          "unit": "次",
          "style": {
            "padding": [20, 20, 50, 20]
          },
          examPlanMonthType: false,
        },


        trainPlanStudentMonth: {//本月人数
          "id": "trainPlanStudentMonth",
          "data": [],
          "unit": "人",
          "style": {
            "padding": [20, 20, 50, 20]
          },
          trainPlanStudentMonthType: false,
        },

      }
    },
    computed: {//计算属性

    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      that.spinShow = true;

      that.$nextTick(function () {
        that.topHeight = that.$refs.wzTopHeight.offsetHeight;
        that.bingTuHeight = that.$refs.bingTuH.offsetHeight;
        that.bingTuHBottHeight = that.$refs.bingTuHBott.offsetHeight;
        window.onresize = function () {
          that.topHeight = that.$refs.wzTopHeight.offsetHeight;
          that.bingTuHeight = that.$refs.bingTuH.offsetHeight;
          that.bingTuHBottHeight = that.$refs.bingTuHBott.offsetHeight;
        };
      })

      that.axios.post(that.apiUrl.statisticsPcEducateStatistics, {}).then(res => {
        that.spinShow = false;
        if (!!res) {
          that.educateStatistics = res.data.data;



          //培训进度统计
          var homeAnalysisLoanMonthNum = [];
          that.educateStatistics.trainPlanYear.forEach((k, i) => {
            homeAnalysisLoanMonthNum.push({'year': k.name, "value": parseFloat(k.value)})
          })
          that.homeAnalysisLoanMonthNum.data = homeAnalysisLoanMonthNum;
          that.homeAnalysisLoanMonthNum.type = true;


          //本月培训
          that.trainPlanMonth.data = [
            {'item': '已完成', "percent": that.educateStatistics.trainPlanMonth.monthTrainFinishCount},
            {'item': '进行中', "percent": that.educateStatistics.trainPlanMonth.monthTrainUnFinishCount},
            {'item': '未开始', "percent": that.educateStatistics.trainPlanMonth.monthTrainUnStartCount},
          ];
          that.trainPlanMonth.trainPlanMonthType = true;


          //本月考试
          that.examPlanMonth.data = [
            {'item': '已完成', "percent": that.educateStatistics.examPlanMonth.monthExamFinishCount},
            {'item': '进行中', "percent": that.educateStatistics.examPlanMonth.monthExamUnFinishCount},
            {'item': '未开始', "percent": that.educateStatistics.examPlanMonth.monthExamUnStartCount},
          ];
          that.examPlanMonth.examPlanMonthType = true;


          //本月人数
          that.trainPlanStudentMonth.data = [
            {'item': '完成数', "percent": that.educateStatistics.trainPlanStudentMonth.monthTrainStudentFinishCount},
            {'item': '未完成', "percent": that.educateStatistics.trainPlanStudentMonth.monthTrainStudentUnFinishCount},
            {'item': '未开始', "percent": that.educateStatistics.trainPlanStudentMonth.monthTrainStudentUnStartCount},
          ];
          that.trainPlanStudentMonth.trainPlanStudentMonthType = true;

        }
      }).catch(err => {
        console.log("失败", err)
      })

      //
      //
      // that.axios.post(that.apiUrl.webApi + "/statistics/pc/mainStatistics", {}).then(res => {
      //   that.spinShow = false;
      //   if (!!res) {
      //
      //   }
      // }).catch(err => {
      //   console.log("失败", err)
      // })

    },
    methods: {//执行的方法
    },
    watch: {//监听

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态
      window.onresize = null;
    }
  }
</script>
<style lang="less">
  ._wz_educationalStatistics {
    height: 843px!important;
    .ivu-card-body {
      padding: 8px !important;
      height: calc(100% - 51px);
    }
    ._wz_educationalStatistics_right{
      .ivu-card-body {
        padding: 8px !important;
        height: 100%!important;
      }
    }
  }
</style>
